<template>
  <div>
    <div class="module" v-for="item, index in moduleList" :key="index"
      :style="{ marginBottom: index == 3 ? '10px' : '' }">
      <div class="title">{{ item.title }}</div>
      <div class="inputNum">
        <el-input-number size="mini" v-model="materialStagingData[item.inputNumKey]"></el-input-number>
      </div>
      <div class="setTime">
        <el-select filterable clearable size="mini" v-model="materialStagingData[item.startHourKey]" placeholder="时" filterable clearable>
          <el-option v-for="m, i in time24" :key="i" :label="m.label" :value="m.value" />
        </el-select><span style="padding:0 10px">:</span>
        <el-select filterable clearable size="mini" v-model="materialStagingData[item.startMinuteKey]" placeholder="分" filterable clearable>
          <el-option v-for="m, i in time60" :key="i" :label="m.label" :value="m.value" />
        </el-select><span style="padding:0 20px">--</span>
        <el-select filterable clearable size="mini" v-model="materialStagingData[item.endHourKey]" placeholder="时" filterable clearable>
          <el-option v-for="m, i in time24" :key="i" :label="m.label" :value="m.value" />
        </el-select><span style="padding:0 10px">:</span>
        <el-select filterable clearable size="mini" v-model="materialStagingData[item.endMinuteKey]" placeholder="分" filterable clearable>
          <el-option v-for="m, i in time60" :key="i" :label="m.label" :value="m.value" />
        </el-select>
      </div>
      <div class="switch">
        <el-switch size="mini" active-color="#13ce66" v-model="materialStagingData[item.switchKey]"
          inactive-color="#ff4949" active-text="开" inactive-text="关" :active-value="'1'" :inactive-value="'0'">
        </el-switch>
        <el-button style="padding:0 10px" type="text" @click="clearItemData(item)">清除备料</el-button>
      </div>
    </div>
    <div style="text-align:right;margin-top:20px;">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="getMaterialStagingData()">确 定</el-button>
    </div>
  </div>
</template>
<script>
export default {
  name: "preparatoryWork",
  props: {
    formData: {
      type: Object,
      default: () => { }
    },
    pondFlag: {
      type: String,
      default: () => 'C'
    },
    tabLabel: {
      type: String,
      default: () => ''
    },
    time60: {
      type: Array,
      default: () => []
    },
    time24: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      copymaterialStagingData: {},
      materialStagingData: {},
      moduleList: [],
      //C塘
      moduleList_C: [
        {
          title: 'A料第一餐备料',
          inputNumKey: 'D217',
          startHourKey: 'D201',
          startMinuteKey: 'D202',
          endHourKey: 'D203',
          endMinuteKey: 'D204',
          switchKey: 'M251'
        }, {
          title: 'A料第二餐备料',
          inputNumKey: 'D218',
          startHourKey: 'D205',
          startMinuteKey: 'D206',
          endHourKey: 'D207',
          endMinuteKey: 'D208',
          switchKey: 'M253'
        }, {
          title: 'A料第三餐备料',
          inputNumKey: 'D219',
          startHourKey: 'D209',
          startMinuteKey: 'D210',
          endHourKey: 'D211',
          endMinuteKey: 'D212',
          switchKey: 'M255'
        }, {
          title: 'A料第四餐备料',
          inputNumKey: 'D220',
          startHourKey: 'D213',
          startMinuteKey: 'D214',
          endHourKey: 'D215',
          endMinuteKey: 'D216',
          switchKey: 'M257'
        }, {
          title: 'B料第一餐备料',
          inputNumKey: 'D237',
          startHourKey: 'D221',
          startMinuteKey: 'D222',
          endHourKey: 'D223',
          endMinuteKey: 'D224',
          switchKey: 'M271'
        }, {
          title: 'B料第二餐备料',
          inputNumKey: 'D238',
          startHourKey: 'D225',
          startMinuteKey: 'D226',
          endHourKey: 'D227',
          endMinuteKey: 'D228',
          switchKey: 'M273'
        }, {
          title: 'B料第三餐备料',
          inputNumKey: 'D239',
          startHourKey: 'D229',
          startMinuteKey: 'D230',
          endHourKey: 'D231',
          endMinuteKey: 'D232',
          switchKey: 'M275'
        }, {
          title: 'B料第四餐备料',
          inputNumKey: 'D240',
          startHourKey: 'D233',
          startMinuteKey: 'D234',
          endHourKey: 'D235',
          endMinuteKey: 'D236',
          switchKey: 'M277'
        }],
      //D塘
      moduleList_D: [
        {
          title: 'A料第一餐备料',
          inputNumKey: 'D257',
          startHourKey: 'D241',
          startMinuteKey: 'D242',
          endHourKey: 'D243',
          endMinuteKey: 'D244',
          switchKey: 'M291'
        }, {
          title: 'A料第二餐备料',
          inputNumKey: 'D258',
          startHourKey: 'D245',
          startMinuteKey: 'D246',
          endHourKey: 'D247',
          endMinuteKey: 'D248',
          switchKey: 'M293'
        }, {
          title: 'A料第三餐备料',
          inputNumKey: 'D259',
          startHourKey: 'D249',
          startMinuteKey: 'D250',
          endHourKey: 'D251',
          endMinuteKey: 'D252',
          switchKey: 'M295'
        }, {
          title: 'A料第四餐备料',
          inputNumKey: 'D260',
          startHourKey: 'D253',
          startMinuteKey: 'D254',
          endHourKey: 'D255',
          endMinuteKey: 'D256',
          switchKey: 'M297'
        }, {
          title: 'B料第一餐备料',
          inputNumKey: 'D277',
          startHourKey: 'D261',
          startMinuteKey: 'D262',
          endHourKey: 'D263',
          endMinuteKey: 'D264',
          switchKey: 'M311'
        }, {
          title: 'B料第二餐备料',
          inputNumKey: 'D278',
          startHourKey: 'D265',
          startMinuteKey: 'D266',
          endHourKey: 'D267',
          endMinuteKey: 'D268',
          switchKey: 'M313'
        }, {
          title: 'B料第三餐备料',
          inputNumKey: 'D279',
          startHourKey: 'D269',
          startMinuteKey: 'D270',
          endHourKey: 'D271',
          endMinuteKey: 'D272',
          switchKey: 'M315'
        }, {
          title: 'B料第四餐备料',
          inputNumKey: 'D280',
          startHourKey: 'D273',
          startMinuteKey: 'D274',
          endHourKey: 'D275',
          endMinuteKey: 'D276',
          switchKey: 'M317'
        }]
    };
  },
  computed: {},
  watch: {},
  created () { },
  mounted () {
    console.log(this.formData, this.pondFlag)
    //debugger
    this.moduleList = this[`moduleList_${this.pondFlag}`];
    this.moduleList.forEach(materialKeyObj => {
      for (let key in materialKeyObj) {
        let configKey = materialKeyObj[key] || '';
        if (key !== 'title' && configKey) {
          this.$set(this.materialStagingData, configKey, this.formData[configKey]);
        };
      };
    });
    // this.copymaterialStagingData = JSON.parse(JSON.stringify(this.materialStagingData));
    // console.log(this.materialStagingData)
  },
  methods: {
    clearItemData (item) {
      console.log(item)
      for (let key in item) {
        let propKey = item[key];
        if (key !== 'title') {
          if (key == 'inputNumKey' || key == 'switchKey') {
            this.materialStagingData[propKey] = '0'
          } else {
            this.materialStagingData[propKey] = '00'
          }
        }
      }
    },
    getMaterialStagingData () {
      for (let key in this.materialStagingData) {
        this.materialStagingData[key] = this.materialStagingData[key] + ''
      }
      this.$emit('getMaterialStagingData', this.materialStagingData)
      console.log(this.materialStagingData)
    },
    cancel () {
      this.$emit('cancel')
    }
  }
};
</script>

<style lang="scss" scoped>
.module {
  display: flex;
  justify-content: flex-start;
  align-content: center;
  line-height: 40px;
  height: 40px;
  transition: all 0.5s;

  &:hover {
    background: rgb(209, 209, 209);
  }

  .title {
    width: 120px;
    padding: 0 10px;
  }

  .inputNum {
    width: 15%;
    min-width: 150px;
    padding-right: 10px;
  }

  .setTime {
    display: flex;
    justify-content: flex-start;
    width: 460px;

    ::v-deep .el-select {
      width: 10%;
      min-width: 80px;
    }
  }
}
</style>
